<template>
  <div class="container">
    <a-card style="width: 100%">
      <div class="filter">
        <div class="form">
          <a-form layout="inline">
            <a-form-item label="试卷名">
              <a-input
                v-model:value="searchValue"
                placeholder="请输入试卷名"
                style="width: 240px"
              ></a-input>
            </a-form-item>
          </a-form>
        </div>
        <div class="action-btns">
          <a-space>
            <a-button type="primary" @click="getExamPaperList">查询</a-button>
          </a-space>
        </div>
      </div>
    </a-card>
    <div class="content">
      <a-card style="width: 100%">
        <a-table
          :dataSource="examPaperList"
          :columns="columns"
          :pagination="{ onChange: handlePageChange, total: pageInfo.total }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'category_list'">
              <span>{{ record.category_list ? record.category_list.join(', ') : '-' }}</span>
            </template>
            <template v-if="column.key === 'answer_status'">
              <span>{{ ExamStatus[record.answer_status] }}</span>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <!-- 考试状态  0首次考试 1允许补考 2考试已通过 3考试未通过(不能补考) -->
                <a-button
                  v-show="record.answer_status === ExamStatus.首次考试"
                  type="link"
                  @click="exam(record.id)"
                >
                  首次考试
                </a-button>
                <a-button
                  v-show="record.answer_status === ExamStatus.允许补考"
                  type="link"
                  @click="exam(record.id)"
                >
                  补考
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { fetchExamPaperList } from '@/api/examPaper'
import { ExamStatus } from '@/enum/index'
import { useRouter } from 'vue-router'

const router = useRouter()

const searchValue = ref('')
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
onMounted(() => {
  getExamPaperList()
})
const getExamPaperList = async () => {
  const params = {
    page_num: pageInfo.value.page,
    conditions: [
      {
        key: 'name',
        operator: 'like',
        value: searchValue.value
      }
    ],
    page_size: pageInfo.value.pageSize,
    order_info: {
      key: 'create_time',
      order: 'desc'
    }
  }
  const res = await fetchExamPaperList(params)
  examPaperList.value = res.data.data
  pageInfo.value.total = res.data.paging.total
}
const examPaperList = ref<any[]>([])
const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '试卷名',
    align: 'center',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '分类',
    align: 'center',
    dataIndex: 'category_list',
    key: 'category_list'
  },
  {
    title: '分数',
    align: 'center',
    dataIndex: 'score',
    key: 'score'
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'answer_status',
    key: 'answer_status'
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    key: 'action'
  }
]

const handlePageChange = (page: number, pageSize: number) => {
  pageInfo.value.page = page
  pageInfo.value.pageSize = pageSize
  getExamPaperList()
}

const exam = (id: number) => {
  router.push({
    path: '/exam/select',
    query: { id }
  })
}
</script>

<style scoped lang="scss">
.container {
  .filter {
    display: flex;
    justify-content: space-between;
  }

  .content {
    margin-top: 24px;
  }
}
</style>
